<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="width:300px" >
        <img :src="`${OpenAPI.BASE}/common/download?name=${me?.userAvatar || '740c79ce-af29-41b8-b78d-5f49c96e38c4.jpg'}`" style="width: 280px; height: 280px" class="image"/>
      </el-aside>
      <el-main style="padding-left: 200px">

<!--        <el-descriptions :title="`房间号${me.account}`" v-if="me">-->
<!--          <el-descriptions-item label="房租/月">{{ me.userName }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="押金">{{ me.userProfile }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="房间详情">{{me.gender}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="房间详情">{{me.phone}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="房间详情">{{me.naivePlace}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="房间详情">{{me.userRole}}</el-descriptions-item>-->
<!--        </el-descriptions>-->
        <div class="demo-collapse" v-if="me">
          <el-collapse v-model="activeNames"  >
            <el-collapse-item title="用户名" name="1">
              {{ me.userName }}
            </el-collapse-item>
            <el-collapse-item title="用户简介" name="2">

              <div>
                {{ me.userProfile }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="性别" name="3">

              <div>
                {{me.gender}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="联系方式" name="5">

              <div>
                {{me.phone}}
              </div>
            </el-collapse-item>
            <el-collapse-item title="用户地址" name="6">

              <div>
                {{me.naivePlace}}
              </div>
            </el-collapse-item><el-collapse-item title="权限" name="7">

              <div>
                {{me.userRole}}
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-button type="primary" @click="openDialog" style="margin-top: 30px">修改</el-button>
          <el-dialog v-model="dialogVisible" title="Dialog Title">
            <!-- 使用 el-form 显示描述列表的数据 -->
            <el-form :model="formLabelAlign" label-position="left" label-width="120px">
              <el-form-item label="账号名称">
                <el-input v-model="formLabelAlign.userName" />
              </el-form-item><el-form-item label="密码">
                <el-input v-model="formLabelAlign.password" />
              </el-form-item>
              <el-form-item label="Telephone">
                <el-input v-model="formLabelAlign.phone" />
              </el-form-item><el-form-item label="userProfile">
                <el-input v-model="formLabelAlign.userProfile" />
              </el-form-item><el-form-item label="gender">
                <el-input v-model="formLabelAlign.gender" />
              </el-form-item><el-form-item label="naivePlace">
                <el-input v-model="formLabelAlign.naivePlace" />
              </el-form-item><el-form-item label="idCard">
                <el-input v-model="formLabelAlign.idCard" />
              </el-form-item>
              <!-- 其他描述列表的项 ... -->
              <el-button type="primary" @click="submitUpdate" style="margin-top: 30px">确认修改</el-button>
            </el-form>
          </el-dialog>
        </div>

        <div v-else>
          Loading...
        </div>

      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">

import {OpenAPI, User_, UserControllerService} from "../../generated";
import {onMounted, ref} from "vue";



// const size = ref('');
let formLabelAlign =({
  userName: "",
  password: "",
  userProfile: "",
  gender: "",
  phone: "",
  naivePlace: "",
  idCard: "",
} as User_);

const dialogVisible = ref(false);

const openDialog = () => {
  // 打开弹出框时，将描述列表的数据赋值给 el-form 的数据
  formLabelAlign= {
    userName: me.value.userName,
    password: me.value.password,
    userProfile: me.value.userProfile,
    gender: me.value.gender,
    phone: me.value.phone,
    naivePlace: me.value.naivePlace,
    idCard: '',

    // ... 获取其他属性的数据 ...
  };
  dialogVisible.value = true;
};

const me=ref();
const getMe = async () => {
  try {
    const response = await UserControllerService.getMeUsingGet();
    if (response.code === 200) {
      me.value = response.result;
    } else {
      console.error('Failed to fetch room:', response.message);
    }
  } catch (error) {
    console.error('Error fetching room:', error);
  }
};


onMounted(() => {
  getMe();
});

const activeNames = ref(["1", "2", "3", "5", "6", "7"]);


const submitUpdate =()=>{
  console.log(formLabelAlign)
}

</script>

<style scoped>
.product-card {
  width: 80%;
  margin: 0 auto;
}
.el-descriptions {
  margin-top: 60px !important; /* 调整列表上方的间距 */
  padding: 50px; /* 修改内边距 */
}

.el-descriptions-item {
  margin-bottom: 30px !important; /* 调整每个描述项之间的间距 */
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>
